<!--排污口管理页面-->
<style lang="less">
.river {
  margin: 15px;
  #map {
    width: 100%;
    max-height: 100%;
  }
  .icon-btn {
    font-size: 20px;
    color: #555555;
  }
  .smallForm {
    margin-right: 20px;
    display: inline-block;
  }
}
</style>

<template>
  <div class="river">
    <Card :bordered="false">
      <p slot="title"
         class="white">更多功能 > <span class="select-font">排污口管理</span></p>
      <div>
        <Button type="error"
                @click.native="del1"
                style="margin-right: 20px">删除排污口</Button>
        <Form :model="formItem"
              class="smallForm">
          <Input v-model="formItem.name"
                 :maxlength="20"
                 style="width:200px;"
                 placeholder="请输入排污口名称"></Input>
        </Form>
        <Button type="info"
                @click="getData('1')">搜索</Button>
      </div>
    </Card>
    <div class="">
      <Table @on-selection-change="showSelect"
             :data="outfallData"
             :columns="outfallColumns"
             stripe></Table>
      <Page class="pull-right"
            :total="Page.total"
            :current="Page.current"
            :page-size="Page.pageSize"
            size="small"
            show-total
            @on-change="changePage"></Page>
    </div>
    <del-modal ref="delModal"
               title='排污口'
               @del="del"
               :delArr="selectData"
               :url="urlOutFalldel"></del-modal>
    <pictures ref="pictures"></pictures>
  </div>
</template>

<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import delModal from 'components/public/delModal';
import picture from 'public/picture';
import tableDropdown from 'public/tableHeaderDropdown';
export default {
  components: {
    'del-modal': delModal,
    pictures: picture,
  },
  data() {
    return {
      urlOutFallList: '/bsi/outfall/list',
      urlOutFalldel: '/bsi/outfall/del',
      utlTownList: '/law/city/list',
      outfallData: [],
      typeList: [
        {
          value: 'all',
          name: '全部',
        },
        {
          value: '禅城区',
          name: '禅城区',
        },
        {
          value: '南海区',
          name: '南海区',
        },
        {
          value: '三水区',
          name: '三水区',
        },
        {
          value: '顺德区',
          name: '顺德区',
        },
        {
          value: '高明区',
          name: '高明区',
        },
      ],
      outfallColumns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left',
        },
        {
          title: '河流名称',
          minWidth: 120,
          key: 'river_name',
        },
        {
          title: '所属河长办',
          minWidth: 110,
          key: 'dep_name',
          render: (h, params) => {
            return h('div', {}, params.row.location.dep_name);
          }
        },
        {
          title: '所属区',
          minWidth: 100,
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '所属区',
                data: this.typeList,
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.formItem.area = data;
                    this.getData(1);
                  } else {
                    this.formItem.area = '';
                    this.getData(1);
                  }
                },
              },
            });
          },
          render: (h, params) => {
            return h('div', {}, params.row.location.area);
          },
        },
        {
          title: '所属镇',
          minWidth: 120,
          renderHeader: (h, params) => {
            return h(tableDropdown, {
              props: {
                placement: 'bottom-start',
                showArrow: true,
                content: '所属镇',
                data: this.townList,
              },
              on: {
                'on-choosed': data => {
                  if (data !== 'all') {
                    this.formItem.town = data;
                    this.getData(1);
                  } else {
                    this.formItem.town = '';
                    this.getData(1);
                  }
                },
              },
            });
          },
          render: (h, params) => {
            return h('div', {}, params.row.location.town);
          },
        },
        {
          title: '排污口名称',
          minWidth: 120,
          key: 'pntname',
        },
        {
          title: '排水口管底高程(m)',
          minWidth: 160,
          key: 'trnheight',
        },
        {
          title: '排水口尺寸',
          minWidth: 120,
          key: 'trnsieze',
        },
        {
          title: '排水类别',
          minWidth: 100,
          key: 'trntype',
        },
        {
          title: '是否违规',
          minWidth: 100,
          key: 'is_illegal',
        },
        {
          title: '是否整治',
          minWidth: 100,
          key: 'is_repair',
        },
        {
          title: '投资资金',
          minWidth: 100,
          key: 'invest',
        },
        {
          title: '图片',
          minWidth: 100,
          render: (h, params) => {
            if (params.row.photo_list) {
              let html = [];
              for (let i = 0; i < params.row.photo_list.length; i++) {
                html.push(
                  h('img', {
                    attrs: {
                      src: params.row.photo_list[i],
                    },
                    style: {
                      width: '50px',
                      height: '50px',
                    },
                    on: {
                      click: () => {
                        this.$refs.pictures.showImg(params.row.photo_list, i);
                      },
                    },
                  })
                );
              }
              return h('div', html);
            } else {
              return h('div', '暂无图片数据');
            }
          },
        },
        {
          title: '地址',
          minWidth: 120,
          render: (h, params) => {
            if (params.row.address) {
              return h('div', params.row.address);
            } else {
              return h('div', '暂无数据');
            }
          },
        },
        {
          title: '备注',
          minWidth: 120,
          key: 'pnt',
        },
      ],
      formItem: {
        name: '',
        area: '',
        town: '',
      },
      Page: {
        current: 1,
        pageSize: 13,
        total: 0,
      },
      actionPage: '1',
      selectData: [],
      townList: [],
    };
  },
  methods: {
    getData(page) {
      let params = {
        data: {
          page,
          pageSize: this.Page.pageSize,
          searchValue: {},
          order: { _id: -1 },
        },
        url: this.urlOutFallList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.outfallData = res.data.result.result;
          this.Page.total = res.data.result.totalSize;
        },
      };
      if (this.formItem.name !== '') {
        params.data.searchValue.pntname = `${this.formItem.name}|#|like`;
      }
      if (this.formItem.area !== '') {
        params.data.searchValue[
          'location.area'
        ] = `${this.formItem.area}|#|like`;
      }
      if (this.formItem.town !== '') {
        params.data.searchValue[
          'location.town'
        ] = `${this.formItem.town}|#|like`;
      }
      ajaxPost(params);
    },
    changePage(page) {
      this.actionPage = page;
      this.getData(page);
    },
    showSelect(data) {
      this.selectData = data; // 把勾选的数组存起来
    },
    del1() {
      if (this.selectData.length > 0) {
        this.$refs.delModal.showModal();
      } else {
        this.$Message.warning('请选择排污口');
      }
    },
    del() {
      this.selectData = [];
      this.getData(this.actionPage);
    },
    getTown() {
      let params = {
        data: {
          searchValue: { level: '3' },
          basis: 2,
        },
        url: this.utlTownList,
        token: storage.session.get('token'),
        success: res => {
          this.$Loading.finish();
          this.townList = [{ name: '全部', value: 'all' }];
          res.data.result.result.map(item => {
            this.townList.push({ name: item.name, value: item.name });
          });
        },
      };
      if (this.formItem.area !== '') {
        params.data.searchValue.level2 = this.formItem.area;
      }
      ajaxPost(params);
    },
  },
  mounted() {
    this.getTown();
    this.getData('1');
  },
  watch: {
    'formItem.area'() {
      this.getTown();
    },
  },
};
</script>
